<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <script src="static/jquery/jquery.js"></script>
    <script src="static/layui/layui.js"></script>
</head>
<body>
<div style="width: 95%;margin: 5px auto">
    <form class="layui-form">
        <input type="hidden" name="userinfoId" id="userinfoId" value="${loginInfo.userinfoId}">
        <div class="layui-form-item">
            <label for="username" class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" value="${loginInfo.username}" name="username" id="username" disabled
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="oldPassword" class="layui-form-label">原密码</label>
            <div class="layui-input-block">
                <input type="password" name="oldPassword" id="oldPassword" placeholder="请输入原密码"
                       class="layui-input"
                       lay-verify="required|checkOldPwd" lay-reqtext="请填写原密码">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="password" class="layui-form-label">新密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" id="password" placeholder="请输入新密码" class="layui-input"
                       lay-verify="required" lay-reqtext="请填写新密码">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="confirmPassword" class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="confirmPassword" id="confirmPassword" placeholder="请再次输入密码"
                       class="layui-input"
                       lay-verify="required|checkPwd" lay-reqtext="请填写确认密码">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <button lay-submit class="layui-btn" lay-filter="update">提交</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    layui.use(function () {
        const form = layui.form;
        // 自定义验证规则
        form.verify({
            checkOldPwd: function (value) {
                let code = 200;
                $.ajax({
                    url: 'admin/userinfo/check/password',
                    data: {
                        userinfoId: $("#userinfoId").val(),
                        password: value
                    },
                    method: "get",
                    dataType: "json",
                    async: false,//设置ajax为同步请求
                    success(res) {
                        code = res.code;
                    },
                    error(e) {
                        layer.alert('检验密码异常！')
                        console.log(e);
                    }
                })
                if (code === 500) {
                    return "原密码不正确";
                }
            },
            checkPwd: function (value) {
                if (value !== $("#password").val()) {
                    return "两次密码不一致！";
                }
            }
        });
        form.on("submit(update)", function (data) {
            $.ajax({
                url: "admin/userinfo/password",
                data: data.field,
                method: "post",
                dataType: "json",
                success(res) {
                    if (res.code === 200) {
                        layer.msg('操作成功！请重新登录！', {icon: 1}, function () {
                            top.location.replace("admin/logout")
                        });
                    } else {
                        layer.alert(res.msg, {icon: 2});
                    }
                },
                error(e) {
                    layer.alert('服务器睡着了', {icon: 6})
                    console.log(e)
                }
            })
            return false;
        });
    })
</script>
</html>
